﻿
        <div style="clear:both;"></div>     
<div id="shopsiler" style="overflow:hidden;height:500px;background-color:#631;">
    {{#for(var i=0, len=d.rows.length;i < len;i ++){}}
    <div class="siler-active" style=" background-color:{{d.rows[i].BG_COLOR}};">
        <div style="width:1190px;height:500px; margin:auto; text-align:center; overflow:hidden;">
            <a href="{{d.rows[i].LINK_URL}}" class="nivo-imageLink">
	            <img src="{{d.rows[i].IMG_URL}}" alt="" title="" height="500" >
            </a>
        </div>
    </div> 
    {{#}}} 
</div>

<script type="text/javascript">
    jQuery(function ($) {
        $(window).load(function () {
            function showsilerontime() {
                var $selp = $("#shopsiler .siler-active");
                var $snext = $selp;
                if ($selp.next().length > 0) {
                    $snext = $selp.next();
                } else if ($selp.prev().length > 0) {
                    $snext = $selp.parent().find(" div:eq(0)");
                }
                $("#shopsiler").attr("background-color", $selp.attr("background-color"));
                $selp.removeClass("siler-active").stop().fadeOut(100, function () {
                    $selp.stop().hide();
                    $("#shopsiler").attr("background-color", $snext.attr("background-color"));
                    $snext.addClass("siler-active").fadeTo(0, 0.3).stop().fadeTo(500, 1);
                });
            };
            var timer = 0; timer = setInterval(function () { showsilerontime(); }, 5000);
        });
    });
</script>
